<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Meteora.Spinbutton</title>
    
    <!-- Meteora -->
    <script src="../../src/meteora.js" type="text/javascript"></script>    
    <!-- Meteora -->

    <link type="text/css" rel="stylesheet" href="../css/test.css" />
  </head>
  <body>
    <h1>Meteora.Spinbutton</h1>

    <div class="instructions">
      Click on the arrows at each side of the inputs below.
    </div>

    <div class="twocolumns">
      <div class="column">
      
        <h3>Non cyclic Spinbutton</h3>
        <input type="text" id="spin_button_1" />
      
      </div>
      <div class="column">
      
        <h3>Cyclic SpinButton:</h3>
        <input type="text" id="spin_button_2" />
      
      </div>
    </div>
    
    <div id="test_div" style="font-size: 20pt"></div>

    <script type="text/javascript">

      Meteora.showDebug(true);

      Meteora.uses('Meteora.Spinbutton');

      Meteora.onStart(
        function () {
          
          new SpinButton(
            'spin_button_1',
            {
              'defaultValue': 0.0,
              'minValue': 0,
              'maxValue': 1,
              'step': 0.01,
              'onChange': function(b) {
                $('test_div').innerHTML = 'The first value is: '+b.value;
              }
            }
          );
          
          new SpinButton(
            'spin_button_2',
            {
              'values': [
                'Monday',
                'Tuesday',
                'Wednesday',
                'Thursday',
                'Friday',
                'Saturday',
                'Sunday'
              ],
              'onChange': function(b) {
                $('test_div').innerHTML = 'The second value is: '+b.value;
              },
              'cycle': true
            }
          );
        }
      );
    </script>
    
  </body>
</html>
